<template>
  <div :gutter="40" class="panel-group">
    <div v-for="(item, index) in panelDataList" :key="index" :xs="12" :sm="12" :lg="item.width || 6"
      class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData(item)">
        <div class="card-panel-icon-wrapper icon-color" :style="styleObject(item.color, item.colorHover)">
          <!-- <svg-icon :icon-class="item.icon" /> -->
          <!-- <el-image :style="{'background-image': getImg(item.icon)}" :src="getImg(item.icon)" :fit="fit"  /> -->
          <div class="icon-box" :style="{ 'background-image': `url(${getImg(item.iconBg)})` }">
            <el-image :style="{ width: '30px' }" :src="getImg(item.icon)" :fit="fit" />
          </div>
          <!-- <svg :class="svgClass" aria-hidden="true" >
            <use :xlink:href="iconName" />
          </svg> -->
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            {{ item.title }}
            <!-- ({{ item.unit }}) -->
          </div>
          <!-- <count-to :start-val="0" :num="item.count" :duration="2600" :decimals="2" class="card-panel-num" /> -->
          <div class="card-panel-num">{{ item.count || item.text }}</div>
          <div class="card-panel-num">{{ item.count || item.text2 }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import CountTo from "./CountTo.vue";
export default {
  components: {
    CountTo,
  },
  props: {
    panelDataList: {
      type: Array,
      default() {
        return [
          // {
          //   width: 12,
          //   name: "regist",
          //   title: "培训数量",
          //   unit: "元",
          //   icon:'../../assets/images/bigScreen/bigScreen-left1.svg',// new URL(`../../assets/images/bigScreen/bigScreen-left1.svg`, import.meta.url).href,
          // iconBg:"../../assets/images/bigScreen/bigScreen-left1.svg",
          //   color: "#36a3f7",
          //   colorHover: "#36a3f7",
          //   count: 820,
          //   text: "820",
          //   changeData: 5.21,
          //   getKey: "regist"
          // },
          // {
          //   width: 12,
          //   name: "empty",
          //   title: "课件数量",
          //   unit: "元",
          //   icon: '../../assets/images/bigScreen/bigScreen-left1.svg',
          //   color: "#36a3f7",
          //   colorHover: "#36a3f7",
          //   count: 340,
          //   text: "340",
          //   changeData: 5.21,
          //   getKey: "empty"
          // },
          // {
          //   width: 12,
          //   name: "warning",
          //   title: "分配/完成人数",
          //   unit: "元",
          //   icon: '../../assets/images/bigScreen/bigScreen-left1.svg',
          //   color: "#36a3f7",
          //   colorHover: "#36a3f7",
          //   count: 0,
          //   text: "820/777",
          //   changeData: 5.21,
          //   getKey: "warning"
          // },
          // {
          //   width: 12,
          //   name: "addNew",
          //   title: "完成率",
          //   unit: "万元",
          //   icon: '../../assets/images/bigScreen/bigScreen-left1.svg',
          //   color: "#36a3f7",
          //   colorHover: "#36a3f7",
          //   count: 0,
          //   text: "83%",
          //   changeData: 5.21,
          //   getKey: "addNew"
          // },
        ];
      }
    },
    panelDataMap: {
      type: Object,
      default() {
        return {}
      }
    },
    countDuration: {
      type: Number,
      default: 2000
    }
  },
  data() {
    return {
      fit: "cover",
    };
  },
  computed: {

  },
  methods: {
    getImg(url) {
      return new URL(url, import.meta.url).href
    },
    styleObject: function (color, colorHover) {
      return
      return {
        "--color": color,
        "--color-hover": colorHover || color
      };
    },
    handleSetLineChartData(type) {
      this.$emit("handleSetLineChartData", type);
    }
  }
};
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;
  padding: 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-evenly;

  .card-panel-col {
    // margin-bottom: 32px;
    background-image: url("@/assets/images/bigScreen/bg-anniu-box.png");
    background-position: center center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%;

    width: 45%;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    // background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px;

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }

      .icon-color {
        background: var(--color-hover);
      }
    }

    .icon-box {
      width: 60px;
      height: 60px;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .icon-color {
      color: var(--color);
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      // float: left;
      // padding: 16px;
      padding: 5px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      text-align: right;
      flex: 1;
      padding: 5px;

      .card-panel-text {
        // line-height: 18px;
        // color: rgba(0, 0, 0, 0.45);
        font-size: 18px;
        // margin-bottom: 12px;

        font-family: '微软雅黑', sans-serif;
        font-weight: 400;
        font-style: normal;
        color: #FFFFFF;
        white-space: nowrap;
      }

      .card-panel-num {
        font-size: 36px;
        font-family: 'Arial Narrow Bold', 'Arial Narrow', 'Arial', sans-serif;
        font-weight: 700;
        color: #0CF4D1;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;


    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
